<template>
  <view>
		<mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" >
			<view class="u-text-center content-desc-item u-padding-top-20 u-font-24" v-if="dataList.length>0">本榜单现仅统计本平台数据</view>
			<view class="u-padding-left-32 u-padding-top-32 u-padding-right-32">
				<view v-for="(item,index) in dataList" :key="index" class="u-margin-bottom-20" :class="{'u-padding-top-37':index==0}"  @click="detail(item)">
					<list-item :item="{...item,...item.systemStore,img:item.avatar}" :width="186" :height="163" :isShare="false" :showFooterRight="false" :user="false" :isTag="false"  customClassName="u-col-top" :padding="25">
						<view slot="arrow" class="u-flex">
							<trend :trend="item.trend"></trend>
							<text class="u-margin-left-10 u-font-28 text-white">{{item.total}}</text>
						</view>
						<view class="u-flex u-margin-right-16">
						</view>
							<image-number :number="item.presentLocation"></image-number>
						<view slot="content">
						</view>
					</list-item>
				</view>
			</view>
		</mescroll-uni>
  </view>
</template>

<script>
import upCallback from '@/mixins/upCallbackMixin.js'
import trend from './trend.vue'
import imageNumber from '@/components/imageNumber/imageNumber.vue'
export default {
  name: "storeRank",
  mixins: [upCallback],
  components: {
  	trend,imageNumber
  },
  data(){
    return{
      apiModule:'shopApi',
			apiType:"powerListStore",
			name:"getPowerListByStore"
    }
  },
  methods:{
		detail(item){
			this.$u.route({
				url:`pagesA/storeList/readonlyDetail`,
				params:{
					id:item.systemStore.id
				}
			})
		}
  },
}
</script>

<style scoped lang="scss">
.money{
  background: rgba(118,92,254,0.2);
  border-radius: 6rpx;
  color: #8973FF;
  font-size: 22rpx;
  padding: 8rpx 9rpx;
	display: inline-block;
}
.flex{
  display: flex;
}
.store{
  height: 230rpx;
  background: #1F1B34;
  border-radius: 26rpx;
  margin-bottom: 20rpx;
  padding: 33rpx;
  box-sizing: border-box;
  padding-right: 0 ;
}
.image{
  width: 187rpx;
  height: 164rpx;
  border-radius: 17rpx;
  margin-left: 26rpx;
  overflow: hidden;
  image{
    width: 100%;
    height: 100%;
  }
}
.fans{
	margin-top: 20rpx;
	.fan{
		background: rgba(118,92,254,0.2);
		border-radius: 6rpx;
		color: #8973FF;
		font-size: 22rpx;
		padding: 5rpx 9rpx;
		margin-right: 10rpx;
	}
	.addfan{
		background: #765CFE;
		border-radius: 6rpx;
		font-size: 22rpx;
		padding: 5rpx 9rpx;
		color: #D0D2F9 ;
	}
}
.jiantou{
  position: absolute;
  right: 0;
  top: -15rpx;
}
.number{
  display: flex;
  text-align: center;
  .img{
    padding-top: 13rpx;
    display: flex;
    margin:  0 auto;
    text-align: center;
  }
}
.right-num{
	position: relative;
	//8rpx
	right: 14rpx; 
}
.dm-ranking{
	padding-bottom: 130px;
}
</style>